/*
 * @Description:
 * @Author: fhw
 * @Date: 2023-02-26 15:36:37
 */
import { useRequest, useSearch } from '@/hooks'
import { clone, } from 'ramda'
import { defineComponent, reactive, toRaw, } from 'vue'
import { OperationRecordState, rows, columns } from './uilts'
import { defaultParams } from '@/utils'
export default defineComponent({
    name: 'CoupleList',
    setup() {
        const { searchForm, expand, expandToggle } = useSearch<API.server.operationRecord.getOperationRecordPage.Params>({
            ...defaultParams
        })
        function search(is = true) {
            const params = clone(toRaw(searchForm.value))
            run({
                ...params,
                ...getPagination(is),
            } as any)
        }
        function clear() {
            searchForm.value = { ...defaultParams }
            search()
        }
        const { run, data, getPagination, renderPagination, loading } = useRequest(
            API.server.operationRecord.getOperationRecordPage.request,
            {
                manual: true,
                pagination: true,
                defaultParams: [{ ...defaultParams }]
            }
        )
        return () => (
            <div>
                <f-search
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                    loading={loading.value}
                    clear={clear}
                    search={search}
                    expand={{
                        value: expand.value,
                        expandToggle,
                    }}
                    searchKey="operationRecordSearchKey"
                    model={searchForm.value}
                    rows={rows}
                />
                <f-table
                    columns={columns}
                    dataSource={data.value.data?.data ?? []}
                    loading={loading.value}
                    rowKey="id"
                    tableKey="operationRecordTable"
                />
                {renderPagination()}
            </div>
        )
    },
})
